<template>
    <div id="gaugechart">
        <div id="gauge"></div>
        <div id="gaugeData">
            <el-input type="textarea" :rows="1" v-model="gaugeDomainS" disabled></el-input>
            <el-button type="primary" plain @click="RandomData">随机数</el-button>
        </div>
    </div>
</template>
<script>
import {GraduatedGaugeChart} from './GraduatedGaugeChart'
export default {
  data () {
    return {
      gaugeDomain: [0, 50, 100],
      gaugeData: 0,
      gaugeChart: {}
    }
  },
  created () {
    this.gaugeChart = new GraduatedGaugeChart('gauge')
    this.gaugeChart.data = 50
    this.gaugeChart.innerRadius = 90
    this.gaugeChart.outerRadius = 100
  },
  mounted () {
    this.gaugeChart.positionX = document.getElementById('gauge').offsetWidth / 2
    this.gaugeChart.positionY = document.getElementById('gauge').offsetHeight / 2
    this.gaugeChart.initLayout()
    this.gaugeChart.initGauge()
    this.gaugeChart.update()
  },
  computed: {
    gaugeDomainS: {
      get: function () {
        return this.gaugeDomain.toString()
      },
      set: function (d) {
        this.gaugeDomain = d.split(',')
      }
    }
  },
  methods: {
    RandomData () {
      let data = parseFloat(Math.random() * 100).toFixed(0)
      this.gaugeChart.data = data
      this.gaugeChart.update()
    }
  }
}
</script>
<style scoped>
#gaugechart {
    height: 100%;
    width: 100%;
}
#gauge {
    height: 70%;
    width: 100%;
}
#gaugeData {
    height: 30%;
    width: 70%;
}
</style>
